<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {Delete, Edit} from "@element-plus/icons-vue";
import {
  addCertificateTypeApi,
  addLevelApi, deleteCertificateTypeApi,
  deleteLevelApi, detailsCertificateTypeApi,
  detailsLevelApi,
  getCertificateTypeListApi,
  getLevelListApi, updateCertificateTypeApi,
  updateLevelApi
} from "@/api/school.js";
import {addNotice, updateNotice} from "@/api/system/notice.js";
import {formatDate} from "@/utils/index.js";

const {proxy} = getCurrentInstance();

const showDia1 = ref(false)

const data = reactive({
  title: '新增',
  form: {},
  total: 0,
  tableData: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
    certName: [{required: true, message: "请输入类型名称", trigger: "blur"}],
    certLevel: [{required: true, message: "请选择", trigger: "blur"}],
  },
});

// 数字转大写
function numberToChinese(num) {
  const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
  return chineseNumbers[num]
}

// 定义一个10级的数组
const levels = Array.from({length: 10}, (_, i) => {
  return {
    label: numberToChinese(i + 1) + '级', value: i + 1
  }
});

const addForm = reactive({
  certName: '',
  certLevel: '',
  id: '',
})

const handleAdd = () => {
  showDia1.value = true
}

const closeDia1 = () => {
  showDia1.value = false
  Object.keys(addForm).forEach(key => {
    addForm[key] = ''
  })
}

const getDataList = async () => {
  const res = await getCertificateTypeListApi(data.queryParams)
  if (res.code == 200) {
    data.tableData = res.rows
    data.total = res.total
  }
}

const submitForm = () => {
  proxy.$refs["formRef"].validate(async valid => {
    if (valid) {
      let res;
      if (addForm.id != '') {
        res = await updateCertificateTypeApi(addForm)
      } else {
        res = await addCertificateTypeApi(addForm)
      }
      if (res.code == 200) {
        proxy.$modal.msgSuccess("操作成功")
      }
      closeDia1()
      await getDataList()
    }
  });
}

const handleDelete = (id) => {
  proxy.$modal.confirm('是否删除该数据？').then(async () => {
    const res = await deleteCertificateTypeApi({id})
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功")
    }
    await getDataList()
  })
}

const handleEdit = async (id) => {
  showDia1.value = true
  data.title = '编辑'
  addForm.id = id
  const res = await detailsCertificateTypeApi({id})
  addForm.certName = res.data.certName
  addForm.certLevel = res.data.certLevel
}

onMounted(() => {
  getDataList()
})
</script>

<template>
  <div class="outBox">
    <CardBox title="证书类型管理">
      <template #btn-cont>
        <el-button type="primary" @click="handleAdd">新建</el-button>
      </template>
      <template #content>
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="180" align="center"/>
          <el-table-column prop="certName" label="类型名称" align="center"/>
          <el-table-column prop="certLevel" label="是否为等级考试" align="center">
            <template #default="scope">
              <el-tag>{{ scope.row.resLevel === 0 ? '否' : '是' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template #default="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <div class="btns">
                <div class="btn">
                  <el-icon color="#152584" @click="handleEdit(scope.row.id)">
                    <Edit/>
                  </el-icon>
                </div>
                <div class="btn" @click="handleDelete(scope.row.id)">
                  <el-icon color="#152584">
                    <Delete/>
                  </el-icon>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <pagination
              v-show="data.total > 0"
              :total="data.total"
              v-model:page="data.queryParams.pageNum"
              v-model:limit="data.queryParams.pageSize"
              @pagination="getDataList"
          />
        </div>
      </template>
    </CardBox>


    <el-dialog
        v-model="showDia1"
        :title="data.title"
        width="500"
        align-center
        :before-close="closeDia1"
    >
      <el-form :model="addForm" ref="formRef" label-width="auto" inline="true" :rules="data.rules">
        <el-form-item label="类型名称：" prop="certName">
          <el-input v-model="addForm.certName"/>
        </el-form-item>
        <el-form-item label="是否为等级考试：" prop="certLevel">
<!--          单选-->
          <el-radio-group v-model="addForm.certLevel">
            <el-radio  label="是" :value="1"></el-radio>
            <el-radio  label="否" :value="0"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDia1 = false">取消</el-button>
          <el-button type="primary" @click="submitForm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.content {
  padding: 20px;
}

.btns {
  display: grid;
  justify-content: center;
  grid-template-columns: 20px 20px;
}
.btn{
  cursor: pointer;
}
</style>
